<template>
  <div>
    <router-view></router-view>
    <!--  分割线-->
    <el-divider></el-divider>

    <!--高级查询-->
    <el-form :inline="true" :model="formInline" label-width="80px" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.client" placeholder="客户"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.phone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="formInline.status" placeholder="客户状态">
          <el-option label="潜在客户" value="1"></el-option>
          <el-option label="目标客户" value="2"></el-option>
          <el-option label="正式客户" value="3"></el-option>
          <el-option label="有效客户" value="4"></el-option>
          <el-option label="无效客户" value="5"></el-option>
          <el-option label="重点跟进" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getAdmmClientUserName">查询</el-button>
        <el-button type="primary" plain @click="addAdm">添加客户</el-button>
        <el-button type="primary" plain @click="addLogJob">添加服务记录</el-button>
      </el-form-item>
    </el-form>
    <!--查询我的客户信息-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        border
        @select-all="selectAll"
        @select="select"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
          align="center">
      </el-table-column>
      <el-table-column
          prop="client"
          label="客户">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系电话">
      </el-table-column>
      <el-table-column
          prop="pertainarea"
          :formatter="diquFun"
          label="地区">
      </el-table-column>
      <el-table-column
          prop="clientUserState"
          label="是否指派">
      </el-table-column>
      <el-table-column
          prop="addtime"
          label="入库日期">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button type="primary" plain>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updateItem(scope.row.id)">修改我的客户</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[2, 4, 6, 8]"
        :total="pageData.total"
        :page-size="formInline.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import {CodeToText} from "element-china-area-data";
export default {
  name: "admmClientUser.vue",
  data() {
    return {
      tableData: [],//查询我的客户表格
      pageData: {},// 存储返回的分页数据
      //高级查询客户表单
      formInline: {
        systemUserId:JSON.parse(localStorage["user"])[0].id,//当前登录者
        pageId: 1,
        pageNum: 2,
      },

    }
  },
  //钩子函数  ..之前执行
  created() {
    this.getAdmmClientUserName();
  },

  methods: {
    //跳转添加服务记录页面
    addLogJob(){
      this.$router.push({name:"InsertLogJob",params:{id:this.sels}})
    },
    //跳转修改我的客户页面
    updateItem(id){
      console.log(id)
      this.$router.push({name:"UpdateAdmmClientUser",params:{id:id}})
    },
    //跳转添加客户页面
    addAdm(){
      this.$router.push("InsertAdmmClientUser")
    },
    //高级查询客户信息
    getAdmmClientUserName() {
      this.$http
          .get("admmClientUser",
              {params: this.formInline})
          .then((res) => {
            this.tableData = res.data.data.list;
            this.pageData = res.data.data; // 返回的分页参数   pageinit


          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //点击复选框获取选中的客户数据
    handleSelectionChange(sels) {
      this.sels = sels[0].clientId;
    },
    //表格中复选框只能选中一个
    select(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection){
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val; //动态改变
      this.getAdmmClientUserName();
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getAdmmClientUserName();
    },
    diquFun(row){
      const pertainareas = row.pertainarea.split(",")
      let area = "";
      switch (pertainareas.length) {
        case 1:
          area += CodeToText[pertainareas[0]];
          break;
        case 2:
          area += CodeToText[pertainareas[0]] + "/" + CodeToText[pertainareas[1]];
          break;
        case 3:
          area +=
              CodeToText[pertainareas[0]] +
              "/" +
              CodeToText[pertainareas[1]] +
              "/" +
              CodeToText[pertainareas[2]];
          break;
        default:
          break;
      }
      return area;



    }

  }
}
</script>

<style scoped>

</style>